<template>
  <el-dialog title="制作单信息" :visible.sync="centerDialogVisible" width="80%" center @open="init" append-to-body>
    <div class="page_main">
      <div class="header">
        <div class="fill_date">填表日期：{{ cuForm.fill_date || '' }}</div>
      </div>
      <div class="content">
        <el-form size="mini" v-loading="formLoading" ref="cuForm" :model="cuForm" :disabled="true">
          <table class="mailTable">
            <tr class="firstTr">
              <td class="firstTd column tip_td">
                类型
              </td>
              <td class="column">
                <el-form-item class="margin-lr-xs text-left" style="margin-bottom: 0;">
                  {{ cuForm.type === 1 ? '外单' : '内单' }}
                </el-form-item>
              </td>
              <td class="column tip_td">
                分类
              </td>
              <td class="column">
                <div class="margin-lr-xs text-left">
                  <el-tag size="mini" v-if="cuForm.dict_class_out_name">{{ cuForm.dict_class_out_name || '' }}</el-tag>
                  <el-tag size="mini" v-if="cuForm.dict_class_in_name">{{ cuForm.dict_class_in_name || '' }}</el-tag>
                </div>
              </td>
            </tr>
            <template v-if="cuForm.type === 1">
              <tr>
                <td class="firstTd column tip_td">
                  公司
                </td>
                <td class="column">
                  <div class="margin-lr-xs text-left">{{cuForm.dept_name}}</div>
                </td>
                <td class="column tip_td">
                  合同
                </td>
                <td class="column">
                  <div class="margin-lr-xs text-left">{{cuForm.contract_num}}</div>
                </td>
              </tr>
              <tr>
                <td class="firstTd column tip_td">
                  项目
                </td>
                <td class="column">
                  <div class="margin-lr-xs text-left">{{cuForm.customer_name}}</div>
                </td>
                <td class="column tip_td">
                  市场（时间段）
                </td>
                <td class="column">
                  <div class="margin-lr-xs text-left">
                    <el-date-picker v-model="cuForm.daterange_arr" type="daterange" size="mini" range-separator="至"
                      start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy年MM月dd日"
                      readonly />
                  </div>
                </td>
              </tr>
            </template>
            <!-- 内单显示字段 -->
            <template v-else-if="cuForm.type === 2">
              <tr>
                <td class="firstTd column tip_td">
                  公司
                </td>
                <td colspan="3" class="column">
                  <div class="margin-lr-xs text-left">{{cuForm.dept_name}}</div>
                </td>
              </tr>
              <tr>
                <td class="firstTd column tip_td">
                  合同
                </td>
                <td class="column">
                  <div class="margin-lr-xs text-left">{{cuForm.contract_num}}</div>
                </td>
                <td class="column tip_td">
                  项目
                </td>
                <td class="column">
                  <div class="margin-lr-xs text-left">{{cuForm.customer_name}}</div>
                </td>
              </tr>
            </template>


            <!-- 画面 -->
            <tr>
              <td class="firstTd column tip_td">
                画面
              </td>
              <td colspan="3" class="column">
                <div class="flex flex-wrap align-center margin-top-sm">
                  <div class="flex flex-direction align-center justify-between margin-left"
                    v-for="(item,index) in cuForm.pics" :key="index">
                    <el-image style="width: 100px;height: 160px;" :src="item.pic_url" fit="contain"
                      :preview-src-list="picList">
                    </el-image>
                    <div>{{ item.uuid }}</div>
                  </div>
                </div>
              </td>
            </tr>


            <!-- 历史制作单，外单才会显示 -->
            <tr v-if="cuForm.type === 1 && tableDataHistory.length">
              <td class="firstTd column tip_td">
                历史制作单
              </td>
              <td colspan="3" class="column">
                <el-card style="margin: 15px 0;padding: 0 20px 20px 20px;">
                  <el-table :data="tableDataHistory" size="mini" style="width: 100%">
                    <el-table-column label="历史制作单" min-width="100" align="center" show-overflow-tooltip>
                      <template slot-scope="{row,$index}">
                        <el-tag size="mini">{{ row.daterange_start + '~' + row.daterange_start }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="生成状态" min-width="100" align="center">
                      <template slot-scope="{row,$index}">
                        <el-tag size="mini" v-if="row.gen_status===1">未生成</el-tag>
                        <el-tag type="warning" size="mini" v-if="row.gen_status===2">部分生成</el-tag>
                        <el-tag type="success" size="mini" v-if="row.gen_status===3">全部生成</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="提交时间" min-width="100" align="center" show-overflow-tooltip>
                      <template slot-scope="{row,$index}">
                        {{ row.created_at ? row.created_at.substring(0, 10) : '' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="b" label="通过时间" min-width="100" align="center" show-overflow-tooltip>
                      <template slot-scope="{row,$index}">
                        {{ row.flow_passed_at ? row.flow_passed_at.substring(0, 10) : '' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="mark_name" label="标记类型" min-width="100" align="center" />
                    <el-table-column prop="mark_memo" label="备注" min-width="100" align="center" />
                  </el-table>
                </el-card>
              </td>
            </tr>


            <!-- 供应商 -->
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>分配供应商、小样配送
              </td>
              <td colspan="3" class="column">
                <el-card style="margin: 15px 0;padding: 0 20px 20px 20px;"
                  v-if="cuForm.bill_market_id || tableDataMedia.length">
                  <el-divider content-position="center">
                    <div class="text-bold">
                      <span class="text-green">分配供应商</span>
                    </div>
                  </el-divider>
                  <el-table :data="tableDataSupplier" class="dataTable" size="mini" border style="width: 100%">
                    <el-table-column prop="supplier_name" label="供应商" min-width="100" align="center" />
                    <el-table-column prop="media_pic_type" label="材质" min-width="100" align="center" />
                    <el-table-column label="画面" min-width="100" align="center">
                      <template slot-scope="{row,$index}">
                        <template v-if="row.choose_info && row.choose_info.length">
                          <span class="margin-left-sm text-bold" v-for="(val,idx) in row.choose_info"
                            :key="val.name">{{ val.name +'（' + val.count +'）' }}</span>
                        </template>
                      </template>
                    </el-table-column>
                  </el-table>


                  <!-- 小样 -->
                  <template v-if="cuForm.has_sample">
                    <el-divider content-position="center">
                      <div class="text-bold">
                        <span class="text-red">小样配送</span>
                      </div>
                    </el-divider>

                    <el-table :data="tableDataSampleDeliver" class="own-table" size="mini" border style="width: 100%">
                      <el-table-column prop="supplier_name" label="供应商" min-width="100" align="center" />
                      <el-table-column label="配送方式" min-width="100" align="center">
                        <template slot-scope="{row,$index}">
                          <el-form-item>
                            <el-select v-model="row.type" placeholder="请选择配送方式" style="width: 100%;">
                              <el-option v-for="item in deliverTypeSampleList" :key="item.id" :label="item.name"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item style="margin-top: 0 !important;" v-if="row.type==3">
                            <el-select v-model="row.run_id" placeholder="请选择跑腿平台" style="width: 100%;">
                              <el-option v-for="item in dictRunArr" :key="item.id" :label="item.name" :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item v-if="row.type==3">
                            <el-input clearable v-model.trim="row.run_cost" placeholder="请输入跑腿费">
                            </el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" label="地址" min-width="100" align="center">
                        <template slot-scope="{row,$index}">
                          <el-form-item>
                            <el-input clearable type="textarea" :rows="1" v-model.trim="row.address"
                              placeholder="请输入地址">
                            </el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-card>
              </td>
            </tr>


            <!-- 配送方式 -->
            <tr v-if="cuForm.type===1 && tableDataSupplier.length">
              <td class="firstTd column tip_td">
                <span class="tip">*</span>配送方式
              </td>
              <td colspan="3" class="column">
                <el-card style="margin: 15px 0;padding: 0 20px 20px 20px;">
                  <el-table :data="tableDataDeliver" class="own-table" size="mini" style="width: 100%">
                    <el-table-column prop="supplier_name" label="供应商" min-width="100" align="center" />
                    <el-table-column label="配送方式" min-width="100" align="center">
                      <template slot-scope="{row,$index}">
                        <el-form-item>
                          <el-select v-model="row.type" placeholder="请选择配送方式" style="width: 100%;">
                            <el-option v-for="item in deliverTypeList" :key="item.id" :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item style="margin-top: 0 !important;" v-if="row.type==3">
                          <el-select v-model="row.run_id" placeholder="请选择跑腿平台" style="width: 100%;">
                            <el-option v-for="item in dictRunArr" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item v-if="row.type==3">
                          <el-input clearable v-model.trim="row.run_cost" placeholder="请输入跑腿费">
                          </el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="hope_time" label="期望送达时间" min-width="100" align="center">
                      <template slot-scope="{row,$index}">
                        <el-form-item>
                          <el-date-picker clearable v-model="row.hope_time" type="datetime" placeholder="选择期望送达时间"
                            value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;">
                          </el-date-picker>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="address" label="地址" min-width="100" align="center">
                      <template slot-scope="{row,$index}">
                        <el-form-item>
                          <el-input clearable type="textarea" :rows="1" v-model.trim="row.address" placeholder="请输入地址">
                          </el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="memo" label="备注" min-width="100" align="center">
                      <template slot-scope="{row,$index}">
                        <el-form-item>
                          <el-input clearable type="textarea" :rows="1" v-model.trim="row.memo" placeholder="请输入备注">
                          </el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </td>
            </tr>


            <tr>
              <td class="firstTd colum tip_td">
                备注
              </td>
              <td colspan="3" class="column" style="padding: 15px 10px">
                <el-input v-model.trim="cuForm.memo" type="textarea" :rows="4"></el-input>
              </td>
            </tr>
          </table>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { list_all3rd_bycode } from '@/api/business/setting/dict'
  import {
    get_deliver_type,
    detail
  } from '@/api/business/ad_make_order'

  import { cloneDeep } from 'lodash'
  import common from '@/utils/common.js'
  import { formatDateByFmt } from '@/utils/util'

  export default {
    name: 'AdMakeOrderDialog',
    props: {
      adMarketOrderId: {
        type: Number,
        default: -1
      }
    },
    components: {

    },
    data() {
      return {
        centerDialogVisible: false,
        cuForm: {
          type: 1,
          dept_id: null,
          contract_id: null,
          customer_id: null,
          bill_market_id: null,
          dict_class_out_id: null,
          dict_class_in_id: null,
          memo: null,
          marks: [],
          pics: [],
          diss: [],
          delivers: [],
          contract_info: null,
          daterange_start: null,
          daterange_end: null,
          dict_class_out_name: null,
          has_sample: false,
        },
        params: {},
        supplierObj: {},
        dictRunArr: [],
        // 历史单
        tableDataHistory: [],
        // 点位详情相关数据
        picList: [], // 画面url数组，用于预览
        tableDataMedia: [],
        // 分配供应商相关数据
        dialogVisibleFrameSupplier: false,
        cuFormFrameSupplier: {},
        tableDataFrameSupplier: [],
        tableDataSupplier: [],
        tableDataSampleDeliver: [],
        tableDataDeliver: [],
        deliverTypeSampleList: [], // 小样配送方式
        deliverTypeList: [], // 配送方式
        runPlatformList: [],

        formLoading: false,
        dialogLoading: false,
      }
    },
    watch: {},
    computed: {},
    created() {},
    methods: {
      // api请求
      getDetail(id) {
        const that = this
        this.formLoading = true
        detail({ id: id }).then(res => {
          let {
            data
          } = res
          const type = data.type === 'OUT' ? 1 : 2,
            markVOList = data.markVOList,
            picVOList = data.picVOList,
            disVOList = data.disVOList,
            deliverVOList = data.deliverVOList,
            history_list = [],
            supplier_obj = {},
            supplier_list = [],
            sample_deliver_list = [],
            deliver_list = []
          // 处理分配供应商
          for (var i in disVOList) {
            var o = disVOList[i],
              supplier_id = o.supplier_id,
              pic_type_id = o.pic_type_id,
              pic_uuid = o.pic_uuid,
              num = o.num
            if (supplier_obj[supplier_id + '_' + pic_type_id]) {
              if (supplier_obj[supplier_id + '_' + pic_type_id].choose_info[pic_uuid]) supplier_obj[supplier_id +
                  '_' + pic_type_id].choose_info[pic_uuid]
                .count += num
              else supplier_obj[supplier_id + '_' + pic_type_id].choose_info[pic_uuid] = {
                name: pic_uuid,
                count: num
              }
            } else {
              supplier_obj[supplier_id + '_' + pic_type_id] = {
                supplier_id: supplier_id,
                supplier_name: o.supplier,
                media_pic_type_id: o.pic_type_id,
                media_pic_type: o.pic_type,
                choose_info: {}
              }
              supplier_obj[supplier_id + '_' + pic_type_id].choose_info[pic_uuid] = {
                name: pic_uuid,
                count: num
              }
            }
          }
          for (var i in supplier_obj) {
            var o = supplier_obj[i],
              choose_info_obj = o.choose_info,
              choose_info = []
            for (var x in choose_info_obj) {
              choose_info.push(choose_info_obj[x])
            }
            var obj = Object.assign({}, o)
            obj.choose_info = choose_info
            supplier_list.push(obj)
          }
          // 处理配送数据
          for (var i in deliverVOList) {
            var o = deliverVOList[i],
              item = {
                supplier_id: o.supplier_id,
                supplier_name: o.supplier,
                type: o.type,
                run_id: o.run_id,
                run_cost: o.run_cost,
                address: o.address
              }
            if (o.sample == 1) {
              sample_deliver_list.push(item)
            } else {
              item.hope_time = o.hope_time
              item.memo = o.memo
              deliver_list.push(item)
            }
          }

          this.cuForm = data
          this.cuForm.type = type
          this.cuForm.daterange_arr = [data.daterange_start, data.daterange_end]
          this.cuForm.fill_date = formatDateByFmt(data.created_at, 'yyyy-MM-dd')
          this.cuForm.pics = picVOList.map((item, index) => {
            return {
              uuid: item.uuid,
              pic_url: item.pic_url
            }
          })
          this.picList = picVOList.map((item, index) => {
            return item.pic_url
          })
          this.tableDataMedia = disVOList
          this.tableDataHistory = markVOList
          this.tableDataSupplier = supplier_list
          this.tableDataSampleDeliver = sample_deliver_list
          this.tableDataDeliver = deliver_list
          this.formLoading = false
        })
      },
      getDeliverTypeSampleList() {
        get_deliver_type({ isSample: 1 }).then(res => {
          this.deliverTypeSampleList = res.data
        })
      },
      getDeliverTypeList() {
        get_deliver_type({ isSample: 0 }).then(res => {
          this.deliverTypeList = res.data
        })
      },
      getDictRunList() {
        list_all3rd_bycode({ code: 'zzdxg-ptpt' }).then(res => {
          this.dictRunArr = res.data.map(item => {
            return {
              id: item.id,
              name: item.name
            }
          })
        })
      },
      // 事件
      init() {
        this.getDetail(this.adMarketOrderId)
        // 初始化
        this.getDeliverTypeSampleList()
        this.getDeliverTypeList()
        this.getDictRunList()
      },
      open() {
        this.centerDialogVisible = true
      }
    }
  }
</script>

<style scoped>
  .title {
    margin-top: 20px;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
  }

  .header {
    width: 98%;
    margin: 0 auto;
    position: relative;
    height: 25px;
  }

  .content {
    margin-top: 20px;
  }

  .fill_date {
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 25px;
  }

  .mailTable {
    width: 98%;
    font-size: 14px;
    margin: 0 auto 10px auto;
    border-collapse: collapse;
  }

  .mailTable tr td {
    height: 60px;
    line-height: 35px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid #E6EAEE;
    border-right: 1px solid #E6EAEE;
    text-align: center;
  }

  .firstTr td {
    border-top: 1px solid #E6EAEE;
  }

  .firstTd {
    border-left: 1px solid #E6EAEE;
  }

  .mailTable tr td.column {
    text-align: center;
  }

  .tip {
    color: red;
    width: 200px;
  }

  .table-herder {
    background-color: #F5F7FA;
    font-weight: bold;
  }

  .tip_td {
    padding: 0 20px !important;
    background-color: #F5F7FA;
    font-weight: bold;
    width: 200px;
  }

  /deep/ .content .el-form-item {
    margin-bottom: 0;
  }

  /deep/ .el-card .el-card__body {
    padding: 0;
  }

  /deep/ .el-input.is-disabled .el-input__inner {
    color: #7f838d;
  }

  /deep/ .choosed-data {
    background-color: #e9f9ff !important;
  }

  .own-form__pic {
    text-align: left;
    padding: 15px 5px;
  }

  /deep/ .own-form__pic .el-form-item__content {
    line-height: 20px !important;
  }

  /deep/ .own-table .el-form-item {
    margin: 18px 0 !important;
  }

  .own-form__pic .upload-demo {
    width: 100%;
    margin: 0;
  }
</style>
